<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>响应式</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    
    <style>
        .box1 {
            height: 50px;
            background: rebeccapurple;
        }
        
        @media screen and (max-width: 1200px) {
            .box1 {
                background: red;
            }
        }
        @media screen and (max-width: 720px) {
            .box1 {
                background: green;
            }
        }
    </style>
    
    <body>
        
        <div class="box1"></div>
        
    </body>
</html>